<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-11 11:09:07
-->
<template>
    <div @click="gotoMV(item)">
        <div class="main-item-img" @mouseenter="showIcon" @mouseleave="closeIcon">
            <img :src="imgUrl" alt="">
            <!-- 遮罩层1 显示播放量-->
            <transition leave-active-class="animate__animated animate__fadeOutUp"
                enter-active-class="animate__animated animate__fadeInDown">
                <div class="mask1" v-show="isShowIcon">
                    <span class="iconfont icon-24gl-playCircle"></span>
                    <!-- 使用自定义插件 —— 格式化数字 -->
                    <span class="playNum">{{ instance.proxy.$formatNums.formatNum(playCount) }}</span>
                </div>
            </transition>

            <!-- 遮罩层2 -->
            <transition>
                <div class="mask2" v-if="isShowMask">
                    <span>{{ item.copywriter }}</span>
                </div>
            </transition>
        </div>

        <div class="main-item-info">
            <span>{{ item.name }}</span>
            <span class="aname">{{ sname }}</span>
        </div>
    </div>
</template>

<script setup>
import 'animate.css';
import { getCurrentInstance, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
const props = defineProps({
    item: Object
})
const instance = getCurrentInstance()
const router = useRouter()

const sname = computed(() => {
    return props.item.artistName || props.item.data?.creator.nickname || props.item.creator[0]?.userName
})

const imgUrl = computed(() => {
    return props.item.picUrl ||
        props.item.cover ||
        props.item.imgurl ||
        props.item.data?.coverUrl || props.item.coverUrl
})
const playCount = computed(() => {
    return props.item.playCount || props.item.data?.playTime || props.item.playTime
})

let isShowIcon = ref(true)
let isShowMask = ref(false)
let time = ref(null)
//移入图片时
function showIcon() {
    //做一个防抖操作
    clearTimeout(time.value)
    time.value = setTimeout(() => {
        isShowIcon.value = false
        isShowMask.value = true
    }, 1500)

}
//移出图片
function closeIcon() {
    setTimeout(() => {
        isShowIcon.value = true
        isShowMask.value = false
    }, 1500)

}

//跳转到mv/视频详细页面
function gotoMV(item) {
    // console.log(item);
    //跳转到mv详情页面
    if (item.id || item.vid) {
        router.push({
            name: 'Videodetail',
            params: { id: item.id || item.vid, type: 'mv' }
        })
    } else if (item.data.vid) {  //跳转到视频详细页面
        router.push({
            name: 'Videodetail',
            params: { id: item.data.vid, type: 'video' }
        })
    }

}
</script>

<style lang="scss" scoped>
.main-item-img {
    height: 150px;
    width: 280px;
    position: relative;

    img {
        height: 100%;
        width: 100%;
    }
}

.main-item-info {
    width: 280px;
    margin-top: 5px;
    margin-left: 15px;
    display: flex;
    flex-direction: column;

    span {
        margin-bottom: 5px;
    }

    .aname {
        color: grey;
        font-size: 10px;
    }
}

.mask1 {
    // pointer-events: none;
    position: absolute;
    display: flex;
    align-items: center;
    top: 5px;
    right: 5px;
    color: white;

    .playNum {
        margin-left: 5px;
    }
}

.mask2 {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    width: 100%;
    height: 30px;
    background: rgba(31, 31, 31, 0.1);
    z-index: 2;
    color: white;
    font-size: 12px;
}
</style>